<template>
  <div class="login-group">
    <div class="login-form">
      <h2>后台登录</h2>
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="right" label-width="80px" @keydown.enter.native="login">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="用户名" v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="密码" v-model="loginForm.password" prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input placeholder="验证码" v-model="loginForm.code" prefix-icon="el-icon-table-lamp">
            <template slot="append">
              <img :src="kaptchaSrc" alt="验证码未生成" title="点击切换验证码" style="height: 40px;width: 120px;display: block;" @click="getKaptcha">
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { uuid } from 'vue-uuid'
export default {
  name: 'Login',
  data () {
    return {
      kaptchaSrc: '',
      loginForm: {
        username: '',
        password: '',
        code: '',
        uuid: ''
      },
      rules: {
        username: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '验证码不能为空',
            trigger: 'blur'
          },
          {
            min: 4,
            max: 4,
            message: '验证长度不正确',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    getKaptcha () {
      this.loginForm.uuid = uuid.v4()
      this.kaptchaSrc = `${process.env.VUE_APP_BASE_API}admin/kaptcha.jpg?uuid=${this.loginForm.uuid}`
    },
    login () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$http.post('admin/login', this.loginForm).then(data => {
            console.log(data)
            this.$cookies.set('token', data.data)
            this.$message({
              message: '登录成功!',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.$router.replace('/home')
              }
            })
          }).catch(() => {
            this.getKaptcha()
          })
        }
      })
    }
  },
  created () {
    this.$nextTick(() => {
      this.getKaptcha()
    })
  }
}
</script>

<style scoped lang="scss">
.login-group{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: url("../../assets/login-bg.jpg") no-repeat center/cover;
  .login-form{
    width: 25vw;
    background: rgba(255,255,255,.4);
    margin: 25vh auto;
    padding: 25px;
    border-radius: 20px;
    h2{
      text-align: center;
      margin-bottom: 20px;
    }
  }
}
</style>
<style>
.el-input-group__append{
  height: 40px;
  width: 120px;
  padding: 0;
  border:0;
}
</style>
